<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <Breadcrumb>
          评论管理
        </Breadcrumb>

        <el-table
          :data="comments"
          style="width: 100%">
          <el-table-column
            prop="title"
            label="文章标题">
          </el-table-column>
          <el-table-column
            prop="total_comment_count"
            label="总评论数"
            width="80">
          </el-table-column>
          <el-table-column
            prop="fans_comment_count"
            width="100"
            label="粉丝评论数">
          </el-table-column>
          <el-table-column
            label="评论状态">
          </el-table-column>

          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                :type="scope.row.comment_status ? 'danger' : 'primary'"
                @click="hSwitch(scope.$index, scope.row)">
                  {{scope.row.comment_status ? '关闭' : '打开' }}评论
                </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="hPageChange"
          :total="total_count">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'comment',
  data () {
    return {
      total_count: 0,
      page: 1, // 当前查询的是第几页
      comments: [
        // {
        //   id: xx,
        //   title: xx,
        //   total_comment_count: xxx
        //   ....
        // }
      ]
    }
  },
  created () {
    this.loadComment()
  },
  methods: {
    // 用户点击了分页中的页码
    hPageChange (curPage) {
      // 1. 更新页码
      this.page = curPage
      // 2. 重发请求
      this.loadComment()
    },
    async loadComment () {
      const result = await this.$http({
        method: 'GET',
        url: '/mp/v1_0/articles',
        params: {
          page: this.page,
          response_type: 'comment'
        }
      })
      console.log('loadComment', result)
      this.comments = result.data.data.results
      this.total_count = result.data.data.total_count
    },
    // 用户点击了 打开,关闭 评论
    async hSwitch (index, row) {
      try {
        // 1. 发请求。 如果当前是打开的状态，则要改成关闭
        console.log(index, row.comment_status)
        // 格式： await 函数()
        //   - 函数是一个返回promise的函数。加上 await在前面，就可以取出promise的promiseValue
        //  xxxx.then(res => {})
        const result = await this.$http({
          method: 'PUT',
          url: '/mp/v1_0/comments/status?article_id=' + row.id.toString(),
          data: {
            allow_comment: !row.comment_status // 切换状态，取反
          }
        })
        console.log(result)
        // 2. 更新数据
        //   (1) 重新加载本页数据
        // this.loadComment()
        //   (2) 在本地修改当前的数据
        row.comment_status = !row.comment_status

        // 3. 提示用户
        this.$message.success('操作ok')

        // TODO: loading
      } catch (err) {
        console.log(err)
        this.$message.error('失败了')
      }
    }
  }
}
</script>

<style>

</style>
